<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="1200px"
      append-to-body
      custom-class="import-dialog"
      @close="close"
    >
      <div class="form-box">

        <el-descriptions title="转租信息" :column="2">
          <el-descriptions-item label="原房源">{{
            form.order.premisesAddress
          }}</el-descriptions-item>
          <el-descriptions-item label="租住周期"
            >{{ form.order.checkInTime|formatDate("YYYY-MM-DD") }}至{{
              form.order.checkOutTime|formatDate("YYYY-MM-DD")
            }}</el-descriptions-item
          >
          <el-descriptions-item label="承租人">{{
            form.order.orderLessee.lesseeName
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            form.order.orderLessee.phone
          }}</el-descriptions-item>
          <el-descriptions-item label="新承租姓名">{{
            form.order.order.reserveUser
          }}</el-descriptions-item>
<!--          <el-descriptions-item label="新企业姓名" v-if="form.order.order.orderLessee&&form.order.order.orderLessee.lesseeType==2">{{-->
<!--            form.order.order.orderLessee.enterpriseName-->
<!--          }}</el-descriptions-item>-->
          <el-descriptions-item label="新联系方式">{{
            form.order.order.reserveUserPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="转租日期">{{
            form.order.changeDate|formatDate("YYYY-MM-DD")
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="申请信息" :column="2">
          <el-descriptions-item label="操作人">
            {{ form.createBy }}</el-descriptions-item
          >
          <el-descriptions-item label="申请时间">
            {{ form.createTime }}</el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions title="审核结果" :column="2" v-if="form.auditRecordState == 2 || form.auditRecordState == 3">
          <el-descriptions-item label="审核人">{{
              form.updateBy }}</el-descriptions-item
          >
          <el-descriptions-item label="审核时间">{{
              form.updateTime }}</el-descriptions-item
          >
          <el-descriptions-item label="审核结果">
            <dict-tag
              :options="dict.type.dict_audit_state"
              :value="form.auditRecordState"
            />
          </el-descriptions-item
          >
          <el-descriptions-item label="原因" v-if="form.auditRecordState == 3">{{ form.remark }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <el-button @click="openOrderDetail(form.order.orderId)" v-if="isDetail">转租前订单</el-button>
      <el-button @click="openOrderDetail(form.afterOrderId)" v-if="isDetail&&form.auditRecordState==2">转租后订单</el-button>
      <el-form
        v-if="!isDetail"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="审核结果" prop="auditRecordState">
          <el-radio-group v-model="form.auditRecordState">
            <el-radio label="2">审核通过</el-radio>
            <el-radio label="3">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="form.auditRecordState == 3"
          label="原因"
          :rules="[
            { required: true, message: '请输入原因', trigger: 'change' },
          ]"
          prop="remark"
        >
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div
        v-if="!isDetail"
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <order-detail
      v-if="detailDialogVisible"
      v-model="detailDialogVisible"
      :orderId="orderId"
    ></order-detail>
  </div>
</template>

<script>
import formRule from "@/utils/formRule.js";
import { getauditRecord, checkAuditRecord } from "@/api/order/order";
import orderDetail from "../../../order/component/order-detail.vue";
export default {
  name: "signOrder",
  dicts: ["order_state","dict_audit_state"],
  components: {orderDetail},
  props: {
    title: {
      default: "转租详情",
    },
    value: {
      default: false,
    },
    recordId: {
      default: undefined,
    },
    isDetail: {
      default: false,
    },
    success: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    var validateCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择审核结果"));
      } else {
        if (value == 1) {
          callback(new Error("请选择审核结果"));
        }
        callback();
      }
    };
    return {
      visible: false,
      dialogSelectHouseVisible: false,
      orderId:'',
      form: {
        createBy: "14",
        createTime: "2024-04-07 17:47:14",
        updateBy: null,
        operatorId: null,
        updateTime: null,
        remark: null,
        tenantId: "1",
        recordId: 1,
        orderId: "O170954687326234299",
        auditRecordType: "1",
        auditRecordState: "1",
        lodgerName: "张三",
        lodgerPhone: "18888888888",
        address: "义务小区江山栋1单元11房",
        order: {
          createBy: "1",
          createTime: "2024-03-04 18:07:53",
          updateBy: "",
          operatorId: 1,
          updateTime: null,
          remark: null,
          tenantId: "1",
          orderId: "O170954687326234299",
          houseId: "H170529000586575593",
          estateId: "dc676a88a91a11eea08200163e01f995",
          estateName: "义务小区",
          buildingId: "01caa574a91c11eea08200163e01f995",
          buildingName: "江山",
          unitId: "01caec8aa91c11eea08200163e01f995",
          unitName: "1",
          provinceId: "11",
          provinceName: "北京市",
          cityId: "1101",
          cityName: "市辖区",
          districtId: "110101",
          districtName: "东城区",
          streetId: "110101001",
          streetName: "东华门街道",
          communityId: "110101001001",
          communityName: "多福巷社区居委会",
          premisesAddress: "义务小区江山栋1单元11房",
          fullAddress: "北京市市辖区东城区东华门街道义务小区江山栋1单元11号",
          orderState: "1",
          orderTab: "1",
          reserveUser: "张三",
          reserveUserPhone: "18570467877",
          deptId: 103,
          checkInTime: "2024-03-05 17:55:00",
          checkOutTime: "2024-04-11 17:55:00",
          realityCheckInTime: null,
          realityCheckOutTime: null,
          finallySignTime: "2024-03-06 17:50:21",
          rentPaidNumber: 1,
          depositPaidNumber: 1,
          order:{
            orderLessee:{}
          },
          orderSource: "1",
          orderType: "1",
          tradingMode: "1",
          linkedOrderId: null,
          freeRentNumber: 1,
          rentalMode: "1",
          depositNumber: 1,
          payNumber: 1,
          deposit: 100.1,
          monthRent: 1.1,
          totalRent: null,
          memberNumber: 0,
          orderLessee: {
            createBy: null,
            createTime: null,
            updateBy: null,
            operatorId: null,
            updateTime: null,
            remark: null,
            tenantId: null,
            lesseeId: null,
            houseId: null,
            lesseeType: "1",
            orderId: null,
            lesseeName: "张三",
            lesseeSex: null,
            cardNumber: "430482199801129613",
            enterpriseName: "张三有限责任公司",
            phone: "18888888888",
            cardImgs: "sdasdasdsadasd",
            lesseeState: null,
            uscc: null,
          },
        },
      },
      areaCalculateState: false,
      chargeItemList: [],
      chargeItemSelected: [],
      options: [
        {
          value: 1,
          label: "押一",
        },
        {
          value: 2,
          label: "押二",
        },
        {
          value: 3,
          label: "押三",
        },
        {
          value: 4,
          label: "押四",
        },
        {
          value: 5,
          label: "押五",
        },
        {
          value: 6,
          label: "押六",
        },
        {
          value: 7,
          label: "押七",
        },
        {
          value: 8,
          label: "押八",
        },
        {
          value: 9,
          label: "押九",
        },
        {
          value: 10,
          label: "押十",
        },
        {
          value: 11,
          label: "押十一",
        },
        {
          value: 12,
          label: "押十二",
        },
      ],
      payoptions: [
        {
          value: 1,
          label: "付一",
        },
        {
          value: 2,
          label: "付二",
        },
        {
          value: 3,
          label: "付三",
        },
        {
          value: 4,
          label: "付四",
        },
        {
          value: 5,
          label: "付五",
        },
        {
          value: 6,
          label: "付六",
        },
        {
          value: 7,
          label: "付七",
        },
        {
          value: 8,
          label: "付八",
        },
        {
          value: 9,
          label: "付九",
        },
        {
          value: 10,
          label: "付十",
        },
        {
          value: 11,
          label: "付十一",
        },
        {
          value: 12,
          label: "付十二",
        },
      ],
      detailDialogVisible:false,
      rules: {
        auditRecordState: [
          {
            required: true,
            validator: validateCheck,
            message: "请选择结果",
            trigger: "change",
          },
        ],
        premisesAddress: [
          { required: true, message: "请选择房间", trigger: "change" },
        ],
        ["orderLessee.phone"]: [
          { required: true, message: "请输入手机", trigger: "blur" },
        ],
        tenantType: [
          { required: true, message: "请选择身份", trigger: "blur" },
        ],
        enterpriseName: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        legalPerson: [
          { required: true, message: "请输入法人信息", trigger: "blur" },
        ],
        socialCreditNumber: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        freeRentNumber: [
          {
            required: true,
            message: "请输入免租天数",
            trigger: "blur",
          },
        ],
        monthRent: [
          {
            required: true,
            message: "请输入月租金",
            trigger: "blur",
          },
        ],
        deposit: [
          {
            required: true,
            message: "请输入押金",
            trigger: "blur",
          },
        ],
        ["orderLessee.lesseeName"]: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["change", "blur"],
          },
        ],
        ["orderLessee.phone"]: [
          { required: true, message: "请输入电话", trigger: "blur" },
          {
            validator: formRule.phone,
            message: "",
            trigger: ["change", "blur"],
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        ["orderLessee.cardNumber"]: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            validator: formRule.IDCard,
            message: "",
            trigger: ["change", "blur"],
          },
        ],

        period: [
          {
            required: true,
            type: "array",
            message: "请选择日期",
            trigger: "change",
          },
        ],
        ["orderLessee.lesseeType"]: [
          { required: true, message: "请选择签约方式", trigger: "change" },
        ],
      },
    };
  },
  computed: {},
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init();
      }
      this.visible = newVal; // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit("input", val); // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    },
  },
  mounted() {
    this.visible = this.value;
  },
  methods: {
    init() {
      //重置
      //this.reset();
      this.getInfo();
    },
    //日期更改
    periodChange(e) {
      this.form.checkInTime = e[0] + " 00:00:00";
      this.form.checkOutTime = e[1] + " 23:59:00";
    },
    finallySignChange(e) {
      this.form.finallySignTime = e + " 23:59:00";
    },
    //重置表单
    reset() {
      this.form = this.$options.data().form;
    },
    openOrderDetail(orderId){
      console.log(orderId);
      this.orderId=orderId;
      this.detailDialogVisible=true;
    },
    formatLabel(value, arr) {
      let data = this[arr].find((item) => {
        return item.value == value;
      });
      return data.label;
    },
    //获取详情
    getInfo() {
      if (!this.recordId) return;
      getauditRecord(this.recordId).then((response) => {
        console.log(response);
        this.form = response.data;
      });
    },
    //提交表单
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.auditRecordState == 2) {
            delete this.form.remark;
          }
          checkAuditRecord(this.form).then((response) => {
            this.$emit("success");
            this.$message.success("审核成功");
            this.visible = false;
          });
        }
      });
    },
    //关闭
    close() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.import-dialog {
  height: auto;
  max-height: 80vh;
  overflow-y: auto;
  .dialog-footer {
    text-align: center;
  }
}
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}
.form-box {
  .tabs {
    display: flex;
    .tabs-item {
      padding: 0 10px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      position: relative;
      cursor: pointer;
      &::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 0;
        height: 2px;
        opacity: 0;
        background: #0caaf0;
        transition: all 0.3s;
      }
      &.active {
        color: #0caaf0;
        &::before {
          opacity: 1;
          left: 0;
          width: 100%;
        }
        cursor: default;
      }
    }
  }
  .add-form {
    .section {
      .label {
        display: flex;
        margin-bottom: 20px;
        font-size: 16px;
        align-items: center;
        color: #303133;
        label {
          display: block;
          width: 80px;
          &.dot::before {
            content: "*";
            color: #ff4949;
            margin-right: 4px;
          }
        }
        .icon {
          color: #02a7f0;
          font-size: 30px;
          margin-left: 30px;
          cursor: pointer;
        }
      }
      .tips {
        color: #aaaaaa;
      }
      .custom-formItem-lable {
        display: flex;
        align-items: center;
        .handle-icon {
          color: #02a7f0;
          font-size: 30px;
          margin-left: 30px;
          cursor: pointer;
        }
      }
      .handle-icon {
        color: #02a7f0;
        font-size: 30px;
        cursor: pointer;
      }
    }
  }
}
</style>
